<script setup lang="ts">
definePageMeta({ layout: false });

const showMoreOptions = ref(false);
const { login, register } = useDailog();
const showGenedShortUrl = ref(false);
const showCaptcha = ref(false);
const shortUrl = ref("");
const { auth } = useAuth();
const { msg, toast } = useStatus();
const frm = reactive({
  origin: "",
  captcha: "",
  password: "",
  expired: "",
});
const { $post } = use$fetch();
const rc = useRuntimeConfig();

const resetFm = () => {
  Object.assign(frm, { origin: "", captcha: "", password: "", expired: "" });
};
const handleToggleShowMoreOptions = () => {
  showMoreOptions.value = !showMoreOptions.value;
};

const handleLoginSubmit = () => {
  login.value = false;
  register.value = false;
  msg.value = "登录成功";
  showCaptcha.value = true;
};
const handleRegisterSubmit = () => {
  register.value = false;
  login.value = false;
  msg.value = "注册成功";
  showCaptcha.value = true;
};

const handleSubmit = async () => {
  if (!auth.value) {
    login.value = true;
    return;
  }
  showCaptcha.value = true;
};

const handleCaptchaVerify = async (token: string) => {
  frm.captcha = token;

  const d = { ...frm };

  await $post<AddUrlResp>("/url", d, (v) => {
    shortUrl.value = `${rc.public.visitUrl}/${v?.url}`;
    showGenedShortUrl.value = true;
    return v;
  });
};
</script>

<template>
  <!-- https://images.unsplash.com/photo-1711526637497-bd9ecfc68567 -->
  <div class="h-full bg-[url('/bg.jpg')] bg-cover bg-fixed relative">
    <FrontendHeader class="bg-white/50" />

    <form
      class="absolute bg-white/50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-md shadow-md p-6 w-3/4 text-lg lg:w-1/3"
      @submit.prevent="handleSubmit"
    >
      <h1 class="text-xl text-center">生成短链接</h1>

      <div
        class="flex justify-between items-center gap-y-4 flex-col lg:flex-row lg:gap-x-2 lg:gap-y-0 my-3 lg:my-8"
        :class="{ '-mb-[5rem] lg:-mb-6': !showMoreOptions }"
      >
        <div
          class="flex justify-between items-center overflow-hidden grow flex-col gap-y-3 lg:flex-row group lg:border lg:rounded-md md:gap-y-0 lg:border-cyan-700/60 lg:focus-within:border-cyan-700/80"
        >
          <div
            class="grow focus-within:border-cyan-700/80 group border border-cyan-700/60 rounded lg:focus-within:border-none lg:border-none"
          >
            <input
              class="bg-transparent block w-full outline-none px-3 py-1.5"
              placeholder="在此输入原网址"
              type="url"
              v-model="frm.origin"
              required
            />
          </div>
          <div class="shrink-0 md:mt-3 lg:mt-0">
            <button class="px-3 py-1.5 bg-cyan-600 text-white" type="submit">
              生成
            </button>
          </div>
        </div>

        <button
          class="flex justify-start items-center gap-x-0.5 shrink-0 text-gray-600"
          @click.prevent="handleToggleShowMoreOptions"
        >
          <div class="text-sm">高级选项</div>
          <div><Icon name="uil:angle-double-down" /></div>
        </button>
      </div>

      <div
        class="flex justify-start items-start gap-x-0 gap-y-2 text-gray-600 flex-col transition-all lg:flex-row lg:items-center lg:gap-x-4 lg:gap-y-0"
        :class="{
          ' visible opacity-100': showMoreOptions,
          ' invisible opacity-0': !showMoreOptions,
        }"
      >
        <label class="flex justify-start items-center text-sm">
          <div>访问密码：</div>
          <div
            class="border border-gray-400/60 focus-within:border-gray-400/80 rounded"
          >
            <input
              class="bg-transparent outline-none px-2 py-1 block w-full"
              type="password"
              v-model="frm.password"
              placeholder="留空免密"
            />
          </div>
        </label>
        <label class="flex justify-start items-center text-sm">
          <div>过期时间：</div>
          <div
            class="border border-gray-400/60 focus-within:border-gray-400/80 rounded"
          >
            <input
              class="bg-transparent outline-none px-2 py-1 block w-full"
              type="date"
              placeholder="留空免密"
            />
          </div>
        </label>
      </div>
    </form>
  </div>

  <FrontendAuthLogin
    v-if="login"
    @click="
      () => {
        login = false;
      }
    "
    @submit="handleLoginSubmit"
  />
  <FrontendAuthRegister
    v-if="register"
    @click="
      () => {
        register = false;
      }
    "
    @submit="handleRegisterSubmit"
  />

  <ClientOnly>
    <FrontendGenedShortUrl
      v-if="showGenedShortUrl"
      :shortUrl="shortUrl"
      @copied="
        () => {
          // showGenedShortUrl = false;
        }
      "
      @new="
        () => {
          resetFm();
          shortUrl = '';
          showGenedShortUrl = false;
          showCaptcha = false;
        }
      "
    />
  </ClientOnly>
  <FrontendHomeCatpcha v-if="showCaptcha" @verify="handleCaptchaVerify" />
</template>
